<template>
  <div
    class="copyright1"
    style="display: flex; margin-bottom: 20px; height: 60px; width: 100vw; justify-content: space-between;"
  >
    <div class="left" style="margin-left: 10px; display: flex; width: 80%">
      <span style="font-size: 50px; color: black; font-weight: bold">VICHI.</span>
      <ul class="nav-list" style="display: flex; list-style: none; margin: 15px; padding: 0">
        <li class="nav-item" :class="{ active: $route.path === '/' }">
          <router-link to="/home" style="font-weight: bold">首页</router-link>
        </li>
        <li class="nav-item" :class="{ active: $route.path === '/companionship' }">
          <router-link to="/companionship" style="font-weight: bold">智伴优学</router-link>
        </li>
        <li class="nav-item" :class="{ active: $route.path === '/ask' }">
          <router-link to="/ask" style="font-weight: bold">睿记精解</router-link>
        </li>
        <li class="nav-item" :class="{ active: $route.path === '/ask' }">
          <router-link to="/ask" style="font-weight: bold">心聆秘语</router-link>
        </li>
        <li class="nav-item" :class="{ active: $route.path === '/note' }">
          <router-link to="/note" style="font-weight: bold">笔记</router-link>
        </li>
      </ul>
    </div>
    <div class="right" style="display: flex; width: 20%">
      <div style="padding: 10px; margin-left: 60px">
        <el-avatar
          shape="square"
          size="default"
          :src="avatarUrl"
          style="border: 2px solid black; margin-top: 10px; cursor:pointer;"
          @click="showSidebar = true"
        />
      </div>
      <div style="margin-left: 10px; margin-top: 30px">
        <span style="font-weight: bold; font-size: 20px">{{ username }}</span>
      </div>
    </div>
  </div>
  <UserSidebar :show="showSidebar" @close="showSidebar = false" />
</template>

<script setup>
import { ref, getCurrentInstance, computed } from 'vue'
import UserSidebar from './UserSidebar.vue'
import defaultAvatar from '@/assets/character.png'
const showSidebar = ref(false)
const avatarUrl = ref(defaultAvatar)

// 动态获取用户名，未登录显示"游客"
const instance = getCurrentInstance()
const username = computed(() => instance?.proxy?.$currentUser?.username || '游客')
</script>

<style scoped>
.copyright1 {
  display: flex;
  margin-bottom: 20px;
  height: 60px;
  width: 100vw;
  justify-content: space-between;
}
.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-item {
  margin-left: 25px;
  font-size: 20px;
  font-weight: 500;
}
.nav-item a {
  color: #333;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: block;
}
.nav-item a:hover {
  background-color: #defcf9;
}
.nav-item.active a {
  border: 2px solid black;
}
</style> 